<template>
  <div class="main" id="country"></div>
</template>

<!-- <script type="text/javascript" src="/public/js/china.js"></script> -->
<script>
import china from "/public/js/China.json"; // 引入地图json数据
import * as echarts from "echarts";
export default {
  name: "app",
  data() {
    return {
      option: {
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          calculable: false,
          orient: "horizontal",
          inRange: {
            color: ["#e0ffff", "#006edd"],
            symbolSize: [30, 100],
          },
        },
        tooltip: {
          padding: 8,
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            color: "#fff",
            decoration: "none",
          },
        },
        series: [
          {
            name: "接入医院数量",
            type: "map",
            mapType: "JS",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
              emphasis: {
                //动态展示的样式
                color: "#fff",
              },
            },
            data: [
              {
                name: "北京",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "天津",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "上海",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "重庆",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "河北",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "河南",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "云南",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "辽宁",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "黑龙江",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "湖南",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "安徽",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "山东",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "新疆",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "江苏",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "浙江",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "江西",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "湖北",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "广西",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "甘肃",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "山西",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "内蒙古",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "陕西",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "吉林",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "福建",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "贵州",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "广东",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "青海",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "西藏",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "四川",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "宁夏",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "海南",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "台湾",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "香港",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "澳门",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    mapTooltipClick(name) {
      alert(name);
    },
    tooltipCharts() {
      console.log(arguments[0]);
      const myChart1 = echarts.init(document.getElementById("country"));
      const option = {
        tooltip: {},
        dataset: {
          source: [
            [
              "xAxis",
              "201701",
              "201702",
              "201703",
              "201704",
              "201705",
              "201706",
              "201707",
              "201708",
              "201709",
              "20170",
              "201710",
              "20170",
              "201801",
            ],
            [
              "amount",
              41.1,
              30.4,
              65.1,
              53.3,
              83.8,
              98.7,
              65.1,
              53.3,
              41.1,
              30.4,
              53.3,
              41.1,
              53.3,
              83.8,
            ],
          ],
        },
        xAxis: {
          type: "category",
          interval: true,
          axisLabel: {
            rotate: 45,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {},
        color: ["#4FA8F9", "#F5A623"],
        grid: {
          show: true,
          backgroundColor: "#FAFAFA",
          left: 30,
          right: 20,
          top: 20,
        },
        series: [
          {
            type: "bar",
            smooth: true,
            seriesLayoutBy: "row",
            barWidth: 10,
          },
        ],
      };
      myChart1.setOption(option);
    },
  },
  mounted() {
    // this.tooltipCharts();
    const myChart = echarts.init(document.getElementById("country"));
    myChart.setOption(this.option);
    // echarts.registerMap("china", china);
    myChart.registerMap("JS", china);

    // this.mapTooltipClick();
    // this.tooltipCharts();

    var count = 0;
    var timeTicket = null;
    var dataLength = this.option.series[0].data.length;
    timeTicket && clearInterval(timeTicket);
    timeTicket = setInterval(function () {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: count % dataLength,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count % dataLength,
      });
      count++;
    }, 1000);

    myChart.on("mouseover", function (params) {
      console.log(params);
      clearInterval(timeTicket);
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: params.dataIndex,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: params.dataIndex,
      });
    });
    myChart.on("mouseout", function (params) {
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function () {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 1000);
    });
  },
};
</script>
